<template>
  <div class="product-list">
    <div class="product-grid">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
          <div v-for="product in products" :key="product.contentId" class="product-card" @click="goToDetail(product)">
            <van-image :src="product.image" radius="8"/>
            <div class="product-info">
              <div class="product-name">{{ product.title }}</div>
              <div class="product-price">
                <span class="points" v-if="product.credits">{{ product.credits }}积分</span>
              </div>
            </div>
        </div>
      </van-list>

    </div>

    <van-loading v-if="loading" class="loading"/>
    <van-empty v-if="!loading && products.length === 0" description="暂无商品"/>
  </div>
</template>

<script>
import {getProductList} from '@/api/product'


export default {
  name: 'ProductList',
  data() {
    return {
      searchValue: '',
      activeTab: 'all',
      products: [],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    async onLoad() {
      this.loading = true;
      const res = await getProductList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      });
      this.loading = false
      this.total = res.data.total
      if (res.data && res.data.rows.length) {
        this.products.push(...res.data.rows);
      }
      if (this.total == this.products.length) {
        this.finished = true;
      }
    },
    goToDetail(row) {
      window.location.href = row.sourceUrl;
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.product-list {
  padding-bottom: 50px;
}

.search-bar {
  position: sticky;
  top: 0;
  z-index: 1;
}

.product-grid {
  padding: 10px;
}

.product-info {
  padding: 8px;
}

.product-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #f44;
  font-size: 16px;
  font-weight: bold;
}

.points {
  color: #999;
  font-size: 12px;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.product-list {
  padding: 10px;
}

.product-card {
  margin-bottom: 15px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.product-card:hover {
  transform: translateY(-2px);
}

.van-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* 保持正方形图片 */
  background-color: #f5f5f5;
}

.product-info {
  padding: 10px;
  text-align: left;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.price {
  color: #f44;
  font-weight: bold;
}

.points {
  color: #999;
}
</style>
